<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="" />
    <link rel="icon" href="" type="image/png" />
    <title>课程概览</title>
    <link href="css/normalize.min.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="app" v-cloak>
      <!--头部导航栏-->
      <header>
        <div class="logo">
          <img src="./images/logo.png" alt="" />
          <span>管理科学与房地产学院</span>
        </div>

        <nav class="menu-container">
          <ul class="wrapper">
            <li><a href="./course_overview.html">学院简介</a></li>
            <li><a href="./redm.html">房地产开发与管理</a></li>
            <li class="on"><a href="./course_map.html">课程地图</a></li>
          </ul>
        </nav>
      </header>
      <!--//头部导航栏-->

      <section class="overview-container">
        <div class="wrapper">
          <div class="tit-group">
            <a href="#" class="el-icon-arrow-left"></a>
            <span>课程</span>
          </div>

          <!-- 课程名称 -->
          <div class="main-title">{{title}}</div>

          <div class="content">
            <!-- 左侧导航 -->
            <div class="slide">
              <ul class="nav">
                <li class="on"><a href="#">课程概览</a></li>
                <li><a href="#">课程大纲</a></li>
                <li><a href="#">课程日历</a></li>
                <li><a href="#">线上课程</a></li>
                <li><a href="#">达成度分析</a></li>
                <li><a href="#">课程评价</a></li>
                <li><a href="#">推荐资源</a></li>
                <li><a href="#">建设历程</a></li>
              </ul>

              <ul class="nav">
                <li><a href="#">自定义导航</a></li>
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
              </ul>
            </div>

            <!-- 主内容 -->
            <div class="main-body">
              <!-- 主要信息 -->
              <div class="main-info">
                <div class="box">
                  <div class="hgroup">
                    <i class="icon-kecheng"></i>
                    <span>课程概览</span>
                  </div>
                  <div class="m-content" v-html="excerpt"></div>
                </div>

                <div class="box">
                  <div class="hgroup">
                    <i class="icon-mubiao"></i>
                    <span>课程目标</span>
                  </div>
                  <div class="m-content">
                    <p v-for="(item,idx) in course_goal" :key="idx">{{idx + 1}}、{{item.course_goal_content}}</p>
                  </div>
                </div>

                <div class="box">
                  <div class="hgroup">
                    <i class="icon-xiangguan"></i>
                    <span>课程相关</span>
                  </div>
                  <div class="m-content">
                    <p>
                      响海极太规无斯科家究响各争济者张价此连圆用位可素上科设两需以农却状质类千矿亲具比次难极总段劳产百老基。万她状六取极己先门思式合平红你八济保件好义专天规没儿由革消结复国权团存小参角治眼花深。集家除其理各周住严制马取省重导指着马自接即高热济南。
                    </p>
                    <p>
                      革动器县马任传步东场时新出全对一目受要争图想报形点气断手酸。事术程族养知林没干求难同资展间立习京数个状活同分速将各支织斯规目容化商北规件少复织道观观很白资表治置受精受必型至何你离选收置名切北区八里之各。置当始知使市价在年存便量太周提海习己江特音做则指圆长自消厂史界此京说属科走级些即己机市角体回容土体立京目近。
                    </p>
                  </div>
                </div>

                <div class="box">
                  <div class="hgroup">
                    <i class="icon-xiangguan"></i>
                    <span>毕业要求相关</span>
                  </div>
                  <div class="m-content">
                    <el-table :data="goals" border stripe style="width: 100%" max-height="600px">
                      <el-table-column align="center" header-align="center" prop="name" label="课程目标" width="120">
                      </el-table-column>
                      <el-table-column align="center" header-align="center" label="毕业要求">
                        <el-table-column
                          v-for="(vo,cid) in bykeys"
                          align="center"
                          header-align="center"
                          :prop="vo"
                          :label="vo">
                          <template #default="{row}">
                            <i style="font-size: 20px; color: #000" class="el-icon-check" v-if="row[vo]"></i>
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>

              <!-- 侧边信息 -->
              <div class="slide-info">
                <div class="box">
                  <h2>授课老师</h2>
                  <p>于婉琴</p>
                  <span
                    >于婉琴介绍：介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍</span
                  >
                </div>

                <div class="box">
                  <h2>开课学院</h2>
                  <p>平凡人做非凡事学 院</p>
                </div>

                <div class="box">
                  <h2>学时学分</h2>
                  <p>{{course_hour}}节课时</p>
                  <p>{{course_scope}}分</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <pre>{{goals}}</pre>

      <!--底部-->
      <footer>
        <div class="wrapper">
          <div class="copyright">管理科学与房地产学院 版权所有</div>
          <div class="tip">建议使用IE8及以上版本或其他高版本浏览器，屏幕分辨率在1366*768及以上的客户端访问</div>
        </div>
      </footer>
    </div>
  </body>

  <!--//底部-->
  <script src="./js/vue.min.js"></script>
  <script src="./js/lodash.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    function getUrlParams(param) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(param) || ''
    }

    var app = new Vue({
      el: '#app',
      data() {
        return {
          info: {},
        }
      },
      computed: {
        id() {
          return getUrlParams('id')
        },

        title() {
          return _.get(this.info, 'title.rendered', '')
        },

        excerpt() {
          return _.get(this.info, 'excerpt.rendered', '')
        },

        course_scope() {
          return _.get(this.info, 'acf.course_scope', '')
        },

        course_hour() {
          return _.get(this.info, 'acf.course_hour', '')
        },

        course_goal() {
          return _.get(this.info, 'acf.course_goal', []) || []
        },
        bykeys() {
          return _.sortBy(_.uniq(_.flatMap(this.course_goal, 'pro_gr_ref_')))
        },
        goals() {
          return _.map(this.course_goal, (item) => {
            const pro_grArrs = _.fromPairs(
              _.map(this.bykeys, (key) => {
                return [key, item.pro_gr_ref_.includes(key)]
              })
            )
            return {
              name: item.course_goal_content,
              ...pro_grArrs,
            }
          })
        },
      },
      mounted() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          if (this.id) {
            fetch(`https://api.kejianxin.com/wp-json/wp/v2/course/${this.id}`)
              .then((res) => {
                return res.json()
              })
              .then((data) => {
                this.info = data || {}
              })
          }
        },
      },
    })
  </script>
</html>
